import ReactDOM from 'react-dom'
import { useState, memo } from 'react'

/**
 * 引入memo之后，可以发现原有的被动更新没有了
 * 但是出现了新的问题，就是如果在子组件内部有传值，
 * 这个memo是失效的，他只能对比最简单的对象
 * 稍微复杂一点的他就无法对比
 */

const Child = memo(() => {
  console.log('child组件更新')
  return (
    <div style={{ backgroundColor: 'skyblue', padding: 5 }}>
      子组件：<button>点击</button>
    </div>
  )
})

const Child2 = memo(() => {
  console.log('Child2 组件更新')
  return (
    <div style={{ backgroundColor: '#abc', padding: 5 }}>
      子组件2 - 年龄： {}
    </div>
  )
})

const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child />
      <br />
      <Child2 />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
